body{
	background-color: #BED2E7;
	margin:0px;
	font-family: Playfair display, Source, sans-serif;
}
* {
  box-sizing: border-box; border-radius: 20px; text-align: left; color: #3B0024;
}/* universeller Selektor */

.container-grid{
  display: grid;
  /*height: 100vh;*/
  /*grid-template-columns: repeat (3,1Fr);*/
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 1em;
  grid-row-gap: 5em;
  /*grid-auto-rows: minmax(0px, 1fr);*/
  grid-template-rows: 0.2fr 0.5fr 0.5fr 1fr;
  grid-template-areas:
  	"topnav topnav topnav"
  	"content2 content1 content1"
  	"content8 content8 content8"
  	"footer footer footer";
  margin: 0px 100px 0px 100px;
}


h1 {font: 2.3vw Playfair display, bold, Verdana, sans-serif; line-height: 130%;}

h2 {font: 2.0vh Playfair display, bold, Verdana, sans-serif;line-height: 130%;}

h2.l {font: 2.5vh Playfair display, bold, Verdana, sans-serif; margin: 0px;line-height: 130%;}

h2.k {font: italic 2vmin Source, sans-serif;line-height: 150%; }

p {font: 2vmin Source, sans-serif, Arial, sans-serif; line-height: 150%;}

p.l {font: 1.8vmin Source, sans-serif, Arial, sans-serif; margin: 0px;line-height: 150%;}

q:lang(no){quotes:'"' '"';}

a {font: 2.5vh Playfair display, bold, Verdana, sans-serif;}
a.k {font: italic 2vmin Source, sans-serif;}
a.t {font: 2vmin Source, sans-serif;}


div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

.topnav{
	grid-area: topnav;
}
ul.nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #001f0f;
  border-radius: 0px 0px 20px 20px;
}
ul.nav li {float: left; text-align: center;}
ul.nav li a {
  display: block;
  background-color: #001f0f;
  color: #BED2E7;
  text-align: center;
  border-radius: 0px;
  padding: 25px 50px;
  text-decoration: none;
  overflow: none;
}
ul.nav li a:hover, ul.nav li a:active  {background-color: #BED2E7; color:#3B0024;}

a.button:link, a.button:visited {
  background-color: #BED2E7;
  color: #001f0f;
  padding: 1em 2em;
  text-align: center;
  text-decoration: none;
  display: inline-grid;
  margin: 1em;
}
a.button:hover, a.button:active {background-color: #BED2E7; color:#3B0024;}

button {
  background-color: #001f0f;
  color: #BED2E7;
  padding: 1em 2em;
  text-align: center;
  text-decoration: none;
  border: none;
  display: inline-grid;
  margin: 1em;
}
button:hover, button:active {background-color: #3B0024; color:#BED2E7;}

/*tablet*/
@media only screen and (max-width: 1200px){
	.container-grid{
	display: grid;
 	 /*height: 100vh;*/
 	 /*grid-template-columns: repeat (3,1Fr);*/
 	 grid-template-columns: 1fr 1fr ;
 	 grid-column-gap: 1em;
  	grid-row-gap: 3em;
 	 /*grid-auto-rows: minmax(0px, 1fr);*/
 	 grid-template-rows: 0.2fr 0.3fr 0.5fr 1fr ;
 	 grid-template-areas:
  	"topnav topnav"
  	"content1 content2"
  	"content8 content8"
  	"footer footer";
  	margin: 0px 20px;
	}
}	
/*smart phone*/
@media only screen and (max-width: 768px){
	.container-grid{
		grid-template-columns: 1fr;
		grid-gap: 1em;
		grid-template-rows: 0.2fr 0.5fr 0.3fr 0.5fr 1fr;
		grid-template-areas: 
		"topnav"
		"content2"
		"content1"
		"content8"
		"footer";
		margin: 0px ;
	}
h1 {font: 5vw Playfair display, bold, Verdana, sans-serif; line-height: 130%;}

h2 {font: 3.0vh Playfair display, bold, Verdana, sans-serif;line-height: 130%;}

h2.l {font: 3.5vh Playfair display, bold, Verdana, sans-serif; margin: 0px;line-height: 130%;}

h2.k {font: italic 3vmin Source, sans-serif;line-height: 150%; }

p {font: 3vmin Source, sans-serif, Arial, sans-serif; line-height: 150%;}

p.l {font: 2.8vmin Source, sans-serif, Arial, sans-serif; margin: 0px;line-height: 150%;}

q:lang(no){quotes:'"' '"';}

a {font: 2.7vh Playfair display, bold, Verdana, sans-serif;}
a.k {font: italic 3vmin Source, sans-serif;}
a.t {font: 3vmin Source, sans-serif;}

ul.nav li a {
  padding: 20px 30px;
}

}


input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: #001f0f;
  color: #ffffff;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}


.content8{
	grid-area: content8;
	padding: 30px;
	margin: 30px;
	font-size: 1.3rem;
	align-items: center;
	border: 3px solid #001f0f;
	background-color: #CEE2F4;
}

.container{
	padding: 30px;
	font-size: 1.3rem;
	align-items: center;
	/*border: 1px solid #F2B79A;*/
}

.content1 {
	grid-area: content1;
}
.content2 {
	grid-area: content2;
	background: url("../images/1.jpg");
	background-size: cover;
	background-position: top;
}
footer{
	grid-area: footer;
	background-color: #001f0f;
	padding-top: 40px;
	align-self: end;
	border-radius: 20px 20px 0px 0px;
	text-align: center;
}